<template>
  <!-- 责任书管理 -->
  <view class="liabilityStatement">
    <u-tabs
      :list="list"
      lineColor="#2488F5"
      lineWidth="30"
      :current="activeIndex"
      :inactiveStyle="inactiveStyle"
      :activeStyle="{ color: '#000' }"
      @click="tabsClick"
    ></u-tabs>

    <view class="wrapper-content">
      <template v-if="activeIndex == 0">
        <scroll-view
          scroll-y="true"
          @scrolltolower="scrollBottom"
          :style="[
            {
              height: '100%',
            },
          ]"
          v-if="dataSource.length"
        >
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view
              class="items"
              :data-url="`/selfInfo/liabilityStatement/liabilityDetails?data=${encodeURIComponent(
                JSON.stringify({ ...v, index: activeIndex })
              )}`"
              @click="liabilityHandle(v)"
            >
              <view class="lt">
                <image
                  :src="baseImgUrl + 'signPdf.png'"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="rt">
                <view class="wrapper-facility">
                  <view class="facility-item">
                    <view class="line-hidden rtName">
                      {{ v.documentName }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">发布时间：</view>
                    <view class="value valueName">
                      <!-- {{ formatters(v.releaseTime, "YY-MM-DD") || "" }} -->
                      {{ v.releaseTime }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">签署单位：</view>
                    <view class="value valueName">
                      {{ v.companyName || "" }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <template v-if="activeIndex == 1">
        <scroll-view
          scroll-y="true"
          @scrolltolower="scrollBottom"
          :style="[
            {
              height: '100%',
            },
          ]"
          v-if="dataSource.length"
        >
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view
              class="items"
              :data-url="`/selfInfo/liabilityStatement/liabilityDetails?data=${encodeURIComponent(
                JSON.stringify({ ...v, index: activeIndex })
              )}`"
              @click="liabilityHandle(v)"
            >
              <view class="lt">
                <image
                  :src="baseImgUrl + 'signPdf.png'"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="rt">
                <view class="wrapper-facility">
                  <view class="facility-item">
                    <view class="line-hidden rtName">
                      {{ v.documentName }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">签署时间：</view>
                    <view class="value valueName">
                      {{ v.createTime }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">签署单位：</view>
                    <view class="value valueName">
                      {{ v.companyName || "" }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          :text="`${
            activeIndex == 0 ? '还没有签署的责任书！' : '还没有已签署的责任书！'
          }`"
          :icon="baseImgUrl + 'no-icon6.png'"
        >
          <!-- :text="还没有签署的责任书！" -->
        </u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import { waitSignPage, signPage } from "@/api/myself.js";
import { hiddenInfo, formatters } from "@/utils/util.js";

export default {
  name: "liabilityStatement",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      paiNew: uni.getStorageSync("paiNew"),
      activeIndex: 0,
      list: [
        {
          name: "待签署",
          badge: {
            isDot: false,
          },
        },
        {
          name: "已签署",
          badge: {
            isDot: false,
          },
        },
      ],
      dataSource: [],
      pageBottom: false,
      options: {},
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad(options) {
    this.options = options;
  },
  onShow() {
    this.dataSource = [];
    this.pageConfig.pageNo = 1;
    this.getList();
  },
  methods: {
    hiddenInfo,
    formatters,
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    tabsClick(item) {
      this.activeIndex = item.index;
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
    },
    liabilityHandle(v) {
      let data = { ...v, index: this.activeIndex };
      uni.setStorageSync("liabilityCurrent", data);
      uni.navigateTo({
        url: "/selfInfo/liabilityStatement/liabilityDetails",
      });
    },
    getList() {
      let data = {
        companyId: this.options.companyId,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      if (this.activeIndex == 0) {
        waitSignPage(data).then((res) => {
          this.dataSource = this.dataSource.concat(res.result.records || []);
          this.pageConfig.total = res.result.total;
        });
      } else {
        signPage(data).then((res) => {
          this.dataSource = this.dataSource.concat(res.result.records || []);
          this.pageConfig.total = res.result.total;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.liabilityStatement {
  flex: 1;

  .wrapper-content {
    height: calc(100vh - 44px);
    background: #f8f9fb;

    .wrapper-item {
      margin: 0 20rpx;
      padding: 20rpx 30rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;

      .items {
        display: flex;
        .lt {
          width: 150rpx;
          height: 180rpx;
          margin-right: 30rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .rt {
          width: 425rpx;
          max-width: 425rpx;
        }
      }
    }
  }

  .wrapper-facility {
    padding-top: 20rpx;
    font-size: 26rpx;
    font-weight: 500;
    .facility-item {
      display: flex;
      margin-bottom: 20rpx;

      .rtName {
        font-size: 32rpx;
        font-weight: bold;
      }

      .lineLabel {
        line-height: 45rpx;
      }

      .label {
        color: #bbbbbb;
        width: 135rpx;
        min-width: 135rpx;
      }
    }
  }
}
</style>
